html,
body,
.container,
.header {
    height: 100%;
}

h1 {
    color: rgb(250, 250, 250);
}

.header {
    position: relative;
    margin: 0 auto;
    min-height: 560px;
    width: 100%;
}

.bg-img {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bg-img img {
    position: absolute;
    top: 0;
    left: 0;
    height: 1282px;
    width: 1920px;
    display: block;
}

.title {
    z-index: 1000;
    margin: 0 auto;
    padding: 0 1.25em;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.intro-effect-grid:not(.notrans) .grid li:nth-child(5) {
    -webkit-transition-property: -webkit-transform, opacity;
    transition-property: transform, opacity;
}

.intro-effect-grid:not(.notrans) .header p {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.intro-effect-grid:not(.notrans) .bg-img,
.intro-effect-grid:not(.notrans) .title {
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
}

.intro-effect-grid:not(.notrans) .header h1,
.intro-effect-grid:not(.notrans) .codrops-demos a {
    -webkit-transition-property: color;
    transition-property: color;
}

.intro-effect-grid:not(.notrans) .grid li:nth-child(5),
.intro-effect-grid:not(.notrans) .bg-img,
.intro-effect-grid:not(.notrans) .title,
.intro-effect-grid:not(.notrans) .header h1,
.intro-effect-grid:not(.notrans) .header p,
.intro-effect-grid:not(.notrans) .codrops-demos a {
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}

.intro-effect-grid .codrops-demos a {
    color: #fff;
}

.intro-effect-grid.modify .codrops-demos a {
    color: #cf7000;
}

.intro-effect-grid .codrops-demos a.current-demo {
    border-bottom: 3px solid #fff;
}

.intro-effect-grid.modify .codrops-demos a.current-demo {
    border-color: #cf7000;
}

.intro-effect-grid .title {
    max-width: 900px;
    padding-top: 2em;
}

.intro-effect-grid.modify .title {
    -webkit-transform: translateX(-50%) translateY(0);
    transform: translateX(-50%) translateY(0);
}

.intro-effect-grid .content>div {
    margin-top: 40px;
    color: #2e3337;
}

.intro-effect-grid .header h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    padding: 0 0 0.6em;
}

.intro-effect-grid.modify .header h1 {
    color: #2d3b44;
}

.intro-effect-grid .header p {
    opacity: 0;
    color: #4c6270;
}

.intro-effect-grid .header p.subline {
    font-size: 1.5em;
}

.intro-effect-grid.modify .header p {
    opacity: 1;
}

.intro-effect-grid .grid {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 0;
}

.intro-effect-grid .grid li::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(71, 63, 59, 0.5);
    pointer-events: none;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
}

.intro-effect-grid.modify .grid li:hover::after,
.intro-effect-grid.modify .grid li:nth-child(5)::after {
    background: rgba(71, 63, 59, 0.1);
}

.intro-effect-grid .grid li {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    cursor: pointer;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.intro-effect-grid .grid li h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    padding-bottom: 0.4em;
    margin: 1em;
    color: #fff;
    line-height: 1;
    font-size: 1em;
    position: absolute;
    bottom: 0;
    z-index: 100;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.intro-effect-grid .grid li:hover h2 {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

.intro-effect-grid .grid li:first-child {
    top: 0;
    left: 0;
    height: 50%;
    width: 25%;
    background-image: url(a1.jpg);
}

.intro-effect-grid .grid li:nth-child(2) {
    top: 50%;
    left: 0;
    height: 50%;
    width: 25%;
    background-image: url(a2.jpg);
}

.intro-effect-grid .grid li:nth-child(3) {
    top: 0;
    left: 25%;
    height: 100%;
    width: 25%;
    background-image: url(a9.jpg);
}

.intro-effect-grid .grid li:nth-child(4) {
    top: 0;
    left: 50%;
    height: 50%;
    width: 50%;
    background-image: url(a4.jpg);
}

.intro-effect-grid .grid li:nth-child(5) {
    top: 50%;
    left: 50%;
    height: 50%;
    width: 25%;
    background-image: url(a8.jpg);
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}

.intro-effect-grid.modify .grid li:nth-child(5) {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.intro-effect-grid .grid li:nth-child(5) h2 {
    color: #de8721;
}

.intro-effect-grid .grid li:nth-child(6) {
    top: 50%;
    left: 75%;
    height: 50%;
    width: 25%;
    background-image: url(a6.jpg);
}

.intro-effect-grid.modify .bg-img {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

.zpa {
    margin: 100px auto;
    width: 1500px;
    height: 3500px;
    background-color: rgb(230, 230, 230, 0.4);
    position: relative;
}

.zpb {
    width: 400px;
    height: 600px;
    position: absolute;
    top: 400px;
    left: 160px;
    background-image: url(3b.jpg);
    background-size: cover;
    z-index: 1;
    transition: all 1s;
}

.zpb:hover {
    background-image: url(3a.jpg);
    background-size: cover;
    box-shadow: 0px 0px 10px rgb(43, 30, 30);
    transform: translate(1px, 1px) scale( 1.2, 1.2)
}

.zpd {
    width: 400px;
    height: 600px;
    position: absolute;
    top: 60px;
    left: 960px;
    background-image: url(5a.jpg);
    background-size: cover;
    transition: all 1s;
}

.zpd:hover {
    background-image: url(5b.jpg);
    background-size: cover;
    box-shadow: 0px 0px 10px rgb(43, 30, 30);
    transform: translate(2px, 2px) scale( 1.2, 1.2)
}

.zpc {
    width: 400px;
    height: 300px;
    position: absolute;
    top: 60px;
    left: 160px;
    background-image: url(4a.jpg);
    background-size: cover;
    transition: all 1s;
}

.zpc:hover {
    background-image: url(4b.jpg);
    background-size: cover;
    box-shadow: 0px 0px 10px rgb(43, 30, 30);
    transform: translate(0px, 0px) scale( 1.2, 1.2)
}

.zpe {
    width: 400px;
    height: 300px;
    position: absolute;
    top: 760px;
    left: 960px;
    background-image: url(10a.jpg);
    background-size: cover;
    transition: all 1s;
}

.zpe:hover {
    background-image: url(10b.png);
    background-size: cover;
    box-shadow: 0px 0px 10px rgb(43, 30, 30);
    transform: translate(0px, 0px) scale( 1.2, 1.2)
}

.zpf {
    width: 400px;
    height: 300px;
    position: absolute;
    top: 1060px;
    left: 160px;
    background-image: url(9a.jpg);
    background-size: cover;
    transition: all 1s;
}

.zpf:hover {
    background-image: url(9.jpg);
    background-size: cover;
    box-shadow: 0px 0px 10px rgb(43, 30, 30);
    transform: translate(0px, 0px) scale( 1.2, 1.2)
}

.zpg {
    width: 777px;
    height: 964px;
    position: absolute;
    top: 1160px;
    left: 660px;
    background-image: url(8a.jpg);
    transition: all 1s;
}

.zpg:hover {
    background-image: url(8b.png);
    background-size: cover;
    box-shadow: 0px 0px 10px rgb(43, 30, 30);
    transform: translate(0px, 0px) scale( 1.2, 1.2)
}

.zph {
    width: 400px;
    height: 600px;
    position: absolute;
    top: 1520px;
    left: 160px;
    background-image: url(6a.jpg);
    background-size: cover;
    transition: all 1s;
}

.zph:hover {
    background-image: url(6b.png);
    background-size: cover;
    box-shadow: 0px 0px 10px rgb(43, 30, 30);
    transform: translate(0px, 0px) scale( 1.2, 1.2)
}

.zpi {
    width: 400px;
    height: 600px;
    position: absolute;
    top: 2260px;
    left: 160px;
    background-image: url(11a.jpg);
    background-size: cover;
    transition: all 1s;
}

.zpi:hover {
    background-image: url(11b.jpg);
    background-size: cover;
    box-shadow: 0px 0px 10px rgb(43, 30, 30);
    transform: translate(0px, 0px) scale( 1.2, 1.2)
}

.zpj {
    width: 400px;
    height: 600px;
    position: absolute;
    top: 2260px;
    left: 960px;
    background-image: url(7a.jpg);
    background-size: cover;
    transition: all 1s;
}

.zpj:hover {
    background-image: url(7b.jpg);
    background-size: cover;
    box-shadow: 0px 0px 10px rgb(43, 30, 30);
    transform: translate(0px, 0px) scale( 1.2, 1.2)
}

.zpb，.zpb,
.zpc,
.zpd,
.zpe {
    display: inline-block;
}